<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>计算属性的复杂操作</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  </head>

  <body>
    <div id="app">
      <h2>书籍的总价值为{{sumPrice}}</h2>
    </div>

    <script>
      //创建Vue实例,得到 ViewModel
      var vm = new Vue({
        el: "#app",
        data: {
          book: [
            { id: 110, name: "Unix编程艺术", price: 119 },
            { id: 111, name: "代码大全", price: 105 },
            { id: 112, name: "深入理解计算机原理", price: 98 },
            { id: 113, name: "现代操作系统", price: 87 },
          ],
        },
        methods: {},
        computed: {
          sumPrice: function () {
            let count = 0;
            for (let i = 0; i < this.book.length; i++) {
              count += this.book[i].price;
            }
            return count;
          },
        },
      });
    </script>
  </body>
</html>
